import './Manage.less';
import { Table, Space, Switch, Popconfirm, message } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useState, useEffect } from 'react';
import { Link } from 'umi';
import { getSubject, delSubject } from '@/services/settings/subjectRequest'

function subjectManage() {
    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
    const [activeButton, setActiveButton] = useState(1);//  按钮颜色切换

    const btnClick = (buttonIndex: any) => {
        setActiveButton(buttonIndex);
    };
    useEffect(() => {
        render();
    }, [])
    const render = async () => {
        const { data, code } = await getSubject()
        if (code == 0) {
            setData(data)
        }
    }
    const [data, setData] = useState([]);
    // 删除
    const confirm = async (subNo: string) => {
        const { code } = await delSubject(subNo)
        if (code == 0) {
            message.success('删除成功')
            render()
        }

    }
    const cancel = (e: any) => {
        console.log(e);
        message.error('Click on No');
    };
    interface DataType {
        key: React.Key;
        subNo: string;
        subName: string;
        balanceDirection: string;
        assistId: string;
        state: string;
        operate: string;
    }
    const columns: ColumnsType<DataType> = [
        {
            title: '科目编号',
            dataIndex: 'subNo',
        },
        {
            title: '科目名称',
            dataIndex: 'subName',
        },
        {
            title: '余额方向',
            dataIndex: 'balanceDirection',
        },
        {
            title: '辅助核算',
            dataIndex: 'assistId',
        },
        {
            title: '状态',
            dataIndex: 'state',
            render: (_, record) => (
                <Space direction="vertical">
                    <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
                </Space>
            ),
        },
        {
            title: '操作',
            dataIndex: 'operate',
            render: (_, record) => (
                <Space size="middle">
                    <Link to={'/home/settings/subject/subjectEdit'}>
                        <a>编辑</a>
                    </Link>
                    <Popconfirm
                        title="删除"
                        description="确定删除吗?"
                        okText="确定"
                        cancelText="取消"
                        onConfirm={()=>{confirm(record.subNo)}}
                        onCancel={cancel}
                    >
                        <a >删除</a>
                    </Popconfirm>

                </Space>
            ),
        },
    ];
    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
    };
    return (
        <div>
            <div className="btnBox">
                <button className={activeButton === 1 ? 'btnHover' : ''} onClick={() => btnClick(1)}>
                    资产
                </button>
                <button className={activeButton === 2 ? 'btnHover' : ''} onClick={() => btnClick(2)}>
                    负债
                </button>
                <button className={activeButton === 3 ? 'btnHover' : ''} onClick={() => btnClick(3)}>
                    权益
                </button>
                <button className={activeButton === 4 ? 'btnHover' : ''} onClick={() => btnClick(4)}>
                    成本
                </button>
                <button className={activeButton === 5 ? 'btnHover' : ''} onClick={() => btnClick(5)}>
                    损益
                </button>
            </div>
            <Link to={'/home/settings/subject/subjectService'}>
                <button className="createBtn">创建</button>
            </Link>
            <Table className="keMuTab"
                rowSelection={{
                    type: selectionType,
                    ...rowSelection,
                }}
                columns={columns}
                dataSource={data}
                pagination={false}
            />
        </div>
    )
}
export default subjectManage;